<!--  -->
<template>
  <div class="cart">
    <!-- 头部 -->
    <NavBar class="home_navbar">
      <div slot="center">购物车</div>
    </NavBar>
    <div class="add_cart">
      <van-button
        @click="show = true"
        icon="plus"
        type="primary"
        size="large"
        v-if="!address.name"
        >添加收货地址</van-button
      >

      <div v-else class="address">
        <div class="name_tel">
          <span class="name">{{ address.name }}</span>
          <span class="tel">{{ address.tel }}</span>
        </div>
        <div class="detail">
          {{
            address.province +
            address.city +
            address.county +
            address.addressDetail
          }}
        </div>
      </div>

      <van-action-sheet v-model="show" title="收货地址">
        <div class="content">
          <van-address-edit
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
          />
        </div>
      </van-action-sheet>
    </div>

    <div class="cart_name">购物车</div>

    <div v-if="this.cartList.length" class="good_list">
      <div v-for="(item, index) in cartList" :key="index" class="list_wrap">
        <div class="check_wrap">
          <van-checkbox
            @click="handleChecked(item.goods_id)"
            v-model="item.checked"
          ></van-checkbox>
        </div>
        <div class="good_info_wrap">
          <van-swipe-cell>
            <van-card
              :num="item.num"
              :title="item.goods_name"
              :thumb="
                item.goods_small_logo
                  ? item.goods_small_logo
                  : 'http://image5.suning.cn/uimg/b2c/newcatentries/0070175200-000000000763892698_2_400x400.jpg'
              "
            >
              <template #price>
                <div class="price">￥{{ item.goods_price }}</div>
              </template>

              <template #footer>
                <van-button
                  :disabled="item.num === 1"
                  @click="sub(index)"
                  size="mini"
                  ><van-icon name="minus"
                /></van-button>
                <van-button @click="add(index)" size="mini"
                  ><van-icon name="plus"
                /></van-button>
              </template>
            </van-card>
            <template #right>
              <van-button
                @click="goods_delete(index)"
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>

    <div v-else class="cover">
      <img src="@/assets/img/cart_kong.gif" alt="" />
    </div>

    <van-submit-bar
      :price="totalPrice * 100"
      @submit="isShow = true"
      button-text="立即结算"
    >
      <van-checkbox @click="handleAllChecked" v-model="allChecked"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <van-dialog v-model="isShow" title="结算中" show-cancel-button>
      <img src="@/assets/img/mine.jpg" />
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import NavBar from "@/components/common/navBar/NavBar.vue";
import Vue from "vue";
import { AddressEdit } from "vant";
import areaList from "@/assets/js/area.js";

Vue.use(AddressEdit);

export default {
  name: "Cart",
  components: {
    NavBar,
  },
  watch: {},
  data() {
    return {
      show: false,
      areaList,
      searchResult: [],
      address: {},
      checked: false,
      radio: false,
      cartList: [],
      allChecked: false,
      totalPrice: 0,
      totalNum: 0,
      isShow: false,
    };
  },
  created() {
    this.cartList = JSON.parse(localStorage.getItem("cart")) || [];
    this.common();
  },
  methods: {
    onSave(content) {
      this.address = content;
      this.show = false;
    },
    onDelete() {
      Toast("delete");
    },
    handleChecked() {
      localStorage.setItem("cart", JSON.stringify(this.cartList));
      this.totalPrice = 0;
      this.totalNum = 0;
      this.common();
    },
    common() {
      this.allChecked = true;
      this.cartList.forEach((v) => {
        if (v.checked) {
          this.totalPrice += v.num * v.goods_price;
          this.totalNum += v.num;
        } else {
          this.allChecked = false;
        }
      });
      this.allChecked = this.cartList.length != 0 ? this.allChecked : false;
    },
    handleAllChecked() {
      this.cartList.forEach((v) => {
        v.checked = this.allChecked;
      });
      //   if (this.allChecked == true) {
      //     this.cartList.forEach((v) => {
      //       v.checked = true;
      //     });
      //   } else {
      //     this.cartList.forEach((v) => {
      //       v.checked = false;
      //     });
      //   }
      this.totalPrice = 0;
      this.totalNum = 0;
      this.common();
    },
    add(index) {
      this.cartList[index].num++;
      this.totalPrice = 0;
      this.totalNum = 0;
      this.common();
      localStorage.setItem("cart", JSON.stringify(this.cartList));
    },
    sub(index) {
      this.cartList[index].num--;
      this.totalPrice = 0;
      this.totalNum = 0;
      this.common();
      localStorage.setItem("cart", JSON.stringify(this.cartList));
    },
    goods_delete(index) {
      this.cartList.splice(index, 1);
      this.totalPrice = 0;
      this.totalNum = 0;
      this.common();
      localStorage.setItem("cart", JSON.stringify(this.cartList));
    },
    // pay(){
    //     console.log("222");
    // }
  },
};
</script>

<style scoped lang='less'>
.home_navbar {
  background-color: #eb4450;
  color: #fff;
  font-weight: 600;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.add_cart {
  margin-top: 54px;
  padding: 5px 10px;
  text-align: center;
  .van-button {
    width: 70%;
    border-radius: 15px;
  }
}
.cart_name {
  margin-top: 10px;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  font-size: 20px;
  font-weight: 600;
  color: red;
}
.content {
  padding: 16px 16px 360px;
}
.address {
  margin: 0 auto;
  width: 92%;
  background-color: pink;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  color: #fff;
  border-radius: 5px;
  .name_tel {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .name {
      font-size: 18px;
      margin-right: 10px;
    }
    .tel {
      font-size: 19px;
    }
  }
  .detail {
    display: flex;
    font-size: 13px;
  }
}
.cover {
  width: 100%;
  img {
    width: 100%;
  }
}
.van-submit-bar {
  border-top: 1px solid #ddd;
  margin-bottom: 49px;
}
.good_list {
  margin-bottom: 100px;
  .list_wrap {
    display: flex;
    margin-bottom: 8px;
    .check_wrap {
      width: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fafafa;
    }
    .good_info_wrap {
      flex: 1;
      .price {
        font-size: 16px;
        color: red;
      }
    }
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-dialog{
    img{
        width: 100%;
    }
}
</style>